<template>
    <div style="position: absolute;width: 100%;height: 100%">
        <heads title="我的" :showBack="{showBack:false}"></heads>
        <div style="background: #35495e;height:110px; display: flex; vertical-align: center;" @click="redirect">
            <div style="height: 80px;width:80px;margin: 10px 0px 0px 20px;">
                <img :src="thumb" width="80" height="80"/>
            </div>
            <div style="flex: 1;padding: 15px;color: white;display: flex;align-items: center;vertical-align: center">
                <div style=" flex: 1;line-height: 30px;">
                    <p>{{name}}</p>
                    <p> {{mobile}}</p>
                </div>

                <div style="color: white; height: 20px;    vertical-align: baseline;" v-if="!user_state">
                    <i class="iconfont icon-31fanhui2"></i>
                </div>

            </div>
        </div>
        <card>
            <div slot="content" class="card-demo-flex card-demo-content01">

                <div class="vux-1px-r" @click="activity">
                    <span>{{article_count}}</span>
                    <br/>
                    动态
                </div>

                <div class="vux-1px-r" @click="focus">
                    <span>{{like_user_count}}</span>
                    <br/>
                    关注
                </div>
                <div class="vux-1px-r" @click="fans">
                    <span>{{fans_count}}</span>
                    <br/>
                    粉丝
                </div>
            </div>
        </card>
        <group>
            <cell title="隐私" is-link @click.native="privacy"></cell>
            <cell title="设置" is-link @click.native="seting"></cell>
        </group>
        <group>
            <x-button @click.native="logout" style="background: white" v-show="user_state">退出登录</x-button>
        </group>
        <toast v-model="showPositionValue"  :time="1000" width="14.6em" :type="type" is-show-mask
               :text="message" :position="position"></toast>
        <foots></foots>
    </div>
</template>

<script>
    import {Blur, Group, Cell, Badge, Grid, GridItem, Card, XButton, Toast} from 'vux'
    import heads from '@/components/header'
    import foots from '@/components/footer'

    export default {
        name: "user",
        components: {
            heads,
            foots,
            Group,
            Cell,
            Badge,
            Grid,
            GridItem,
            Card,
            XButton,
            Toast
        },
        computed: {
            name() {
                if (this.$store.state.name == '') {
                    return '立即登录'
                } else {
                    return this.$store.state.name
                }

            },
            user_state() {
                return this.$store.state.user_state
            },
            user_id(){
                return this.$store.getters.user_id
            },
            thumb(){
                return this.$store.getters.thumb
            },
            mobile() {
                if (this.$store.state.mobile == '') {
                    return '登录可享更多功能';
                } else {
                    return this.$store.state.mobile
                }

            },
            article_count() {
                return this.$store.state.article_count
            },
            like_user_count() {
                return this.$store.state.like_user_count
            },
            fans_count() {
                return this.$store.state.fans_count
            }

        },
        methods: {

            privacy() {

                this.message = '功能尚未开发';
                this.showPositionValue = true;
                this.type = 'warn'
            },
            seting() {
                this.message = '功能尚未开发';
                this.showPositionValue = true;
                this.type = 'warn'
            },
            logout() {
                var _this = this;
                this.$axios.post(this.$axios.defaults.baseURL + 'logout', {}).then(function (res) {
                    console.log(res.data)
                    if (res.data.state) {
                        _this.$store.commit('logout')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            redirect() {
                if (this.user_state) {
                    this.$router.push('userEdit');

                } else {
                    this.$router.push('login')
                }
            },
            activity() {
                if (this.user_state)

                    this.$router.push({path: 'activity', query:{id:this.user_id}});
            },
            fans() {
                if (this.user_state)
                    this.$router.push('fans');
            },
            focus() {
                if (this.user_state)
                    this.$router.push('focus');
            }


        },

        data() {
            return {

                showPositionValue: false,
                message: null,
                type: 'success',
                position: 'middle',
            }
        },


    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/comm";
    a {
        color: white;
    }

    .weui-panel {
        margin-top: 0px;
    }

    .card-demo-flex {
        display: flex;
    }

    .card-demo-content01 {
        padding: 10px 0;
    }

    .card-padding {
        padding: 15px;
    }

    .card-demo-flex > div {
        flex: 1;
        text-align: center;
        font-size: 12px;
    }

    .card-demo-flex span {
        color: #f74c31;
    }
</style>